<template>
  简单类型：<input v-model="message"><br><br>
  复杂类型：<input v-model="object.message">

  <ProvideInjectChildren/>
</template>

<script>
import {defineComponent} from 'vue';
import ProvideInjectChildren from '@/components/provide-inject/ProvideInjectChildren.vue';

export default defineComponent({
  name: 'ProvideInject',
  components: {ProvideInjectChildren},
  data() {
    return {
      message: '祖先组件',
      object: {
        message: '祖先组件',
      }
    };
  },
  /* provide: {
    message: '祖先组件',
  } */
  provide() { // 函数形式可访问到this，但无响应式特性
    return {
      message: this.message,
      object: this.object,
    };
  }
});
</script>

<style scoped>

</style>